<template>
  <div class="app-container">
    <div class="app-content">
      <el-row type="flex" justify="end">
        <el-button size="mini" @click="toBack">返回</el-button>
      </el-row>
      <el-descriptions>
        <el-descriptions-item label="项目名称">{{
          form.projectName
        }}</el-descriptions-item>
        <el-descriptions-item label="业主单位">{{
          form.ownerUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="单位地址">{{
          form.ownerUnitArea
        }}</el-descriptions-item>
        <el-descriptions-item label="业主负责人">{{
          form.owner
        }}</el-descriptions-item>
        <el-descriptions-item label="业主负责人电话">{{
          form.ownerPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="使用单位">{{
          form.useUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="使用单位联系人">{{
          form.useName
        }}</el-descriptions-item>
        <el-descriptions-item label="使用单位电话">{{
          form.usePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="设计单位">{{
          form.designUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="设计单位联系人">{{
          form.designName
        }}</el-descriptions-item>
        <el-descriptions-item label="设计单位电话">{{
          form.designPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="监理单位">{{
          form.superviseUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="监理单位联系人">{{
          form.superviseName
        }}</el-descriptions-item>
        <el-descriptions-item label="监理单位电话">{{
          form.supervisePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="总包单位">{{
          form.contractingUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="总包单位联系人">{{
          form.contractingName
        }}</el-descriptions-item>
        <el-descriptions-item label="总包单位电话">{{
          form.contractingPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="合作单位">{{
          form.cooperateUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="合作单位联系人">{{
          form.cooperateName
        }}</el-descriptions-item>
        <el-descriptions-item label="合作单位电话">{{
          form.cooperatePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="跟审单位">{{
          form.checkUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="跟审单位联系人">{{
          form.checkName
        }}</el-descriptions-item>
        <el-descriptions-item label="跟审单位电话">{{
          form.checkPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="预算审核单位">{{
          form.budgetReviewUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="预算审核联系人">{{
          form.budgetReviewName
        }}</el-descriptions-item>
        <el-descriptions-item label="预算审核电话">{{
          form.budgetReviewPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="审计单位">{{
          form.auditUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="审计单位联系人">{{
          form.auditName
        }}</el-descriptions-item>
        <el-descriptions-item label="审计单位电话">{{
          form.auditPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="检测单位">{{
          form.testUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="检测单位联系人">{{
          form.testName
        }}</el-descriptions-item>
        <el-descriptions-item label="检测单位电话">{{
          form.testPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="运营商">{{
          form.operators
        }}</el-descriptions-item>
        <el-descriptions-item label="运营商开通时间">{{
          form.operatorsTime
        }}</el-descriptions-item>
        <el-descriptions-item label="运营商电话">{{
          form.operatorsPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="分包单位">{{
          form.subcontractUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="分包单位联系人">{{
          form.subcontractName
        }}</el-descriptions-item>
        <el-descriptions-item label="分包单位电话">{{
          form.subcontractPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="业务负责人">{{
          form.businessManager
        }}</el-descriptions-item>
        <el-descriptions-item label="业务负责人电话">{{
          form.businessPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="售前负责人">{{
          form.presaleManager
        }}</el-descriptions-item>
        <el-descriptions-item label="售前负责人电话">{{
          form.presalePhone
        }}</el-descriptions-item>
        <el-descriptions-item label="分包单位负责人">{{
          form.subcontractManager
        }}</el-descriptions-item>
        <el-descriptions-item label="分包单位负责人电话">{{
          form.subcontractManagerPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="总包预估工期">{{
          form.contractingPredictDuration
        }}</el-descriptions-item>
        <el-descriptions-item label="总包实际工期">{{
          form.contractingActualDuration
        }}</el-descriptions-item>
        <el-descriptions-item label="项目工期">{{
          form.projectDuration
        }}</el-descriptions-item>
        <el-descriptions-item label="项目实际工期">{{
          form.actualDuration
        }}</el-descriptions-item>
        <el-descriptions-item label="开工日期">{{
          form.startDate
        }}</el-descriptions-item>
        <el-descriptions-item label="初验日期">{{
          form.inspectDate
        }}</el-descriptions-item>
        <el-descriptions-item label="竣工日期">{{
          form.completionDate
        }}</el-descriptions-item>
        <el-descriptions-item label="质保时间">{{
          form.warrantyTime
        }}</el-descriptions-item>

        <!-- <el-descriptions-item label="合同时间">{{
          form.contractDate
        }}</el-descriptions-item>
        <el-descriptions-item label="到期时间">{{
          form.contractEndDate
        }}</el-descriptions-item> -->
        <el-descriptions-item label="项目经理">{{
          form.projectManager
        }}</el-descriptions-item>
        <el-descriptions-item label="项目经理电话">{{
          form.projectManagerPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="项目类型">
          <dict-tag
            :options="dict.type.project_type"
            :value="form.projectType"
          ></dict-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注" span="3">{{
          form.remark
        }}</el-descriptions-item>
        <el-descriptions-item label="图片" span="3">
          <template>
            <img
              :src="item"
              alt=""
              class="son-img"
              v-for="(item, index) in form.imgList"
              :key="index"
            />
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="附件" span="3">
          <div class="files">
            <div
              class="file-content"
              v-for="(item, index) in form.fileList"
              :key="index"
              @click="getShowFile(item)"
            >
              <img
                v-if="getSuffix(item) === 'pdf'"
                src="@/assets/images/pdf.png"
                alt=""
              />
              <img
                v-else-if="getSuffix(item) === 'xlsx'"
                src="@/assets/images/excel.png"
                alt=""
              />
              <img v-else src="@/assets/images/word.png" alt="" />
              <div class="file-name">
                <p>{{ getFileName(item) }}</p>
                <span>219.8KB</span>
              </div>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="上传清单" span="3">
          <div class="files">
            <div
              class="file-content"
              v-for="(item, index) in form.deviceFileList"
              :key="index"
              @click="getShowFile(item)"
            >
              <img
                v-if="getSuffix(item) === 'pdf'"
                src="@/assets/images/pdf.png"
                alt=""
              />
              <img
                v-else-if="getSuffix(item) === 'xlsx'"
                src="@/assets/images/excel.png"
                alt=""
              />
              <img v-else src="@/assets/images/word.png" alt="" />
              <div class="file-name">
                <p>{{ getFileName(item) }}</p>
              </div>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <DrawerFile
      v-if="drawer"
      :drawer.sync="drawer"
      :fileName="fileName"
      :src="fileUrl"
    />
  </div>
</template>

<script>
import { getProject } from "@/api/resource/project";
import DrawerFile from "@/components/DrawerFile";
export default {
  name: "Project",
  components: { DrawerFile },
  dicts: ["project_type"],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      form: {},
      drawer: false,
      fileName: "",
      fileUrl: "",
    };
  },
  created() {
    let id = this.$route.params.id;
    if (!id) return;
    getProject(id).then((response) => {
      if (response.data.img) {
        response.data.imgList = [];
        let imgArr = response.data.img.split(",");
        response.data.imgList = imgArr.map((item) => {
          return this.baseUrl + item;
        });
      }
      if (response.data.file) {
        response.data.fileList = [];
        let fileArr = response.data.file.split(",");
        response.data.fileList = fileArr.map((item) => {
          return this.baseUrl + item;
        });
      }
      if (response.data.deviceFile) {
        response.data.deviceFileList = [];
        let fileArr = response.data.deviceFile.split(",");
        response.data.deviceFileList = fileArr.map((item) => {
          return this.baseUrl + item;
        });
      }
      this.form = response.data;
    });
  },
  methods: {
    /** 展示附件 */
    getShowFile(row) {
      this.drawer = true;
      this.fileName = this.getFileName(row);
      this.fileUrl = row;
    },
    getSuffix(item) {
      const suffix = item.substr(item.lastIndexOf(".") + 1, item.length);
      return suffix;
    },
    toBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-content {
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 30px;
  overflow-y: scroll;
  .son-img {
    width: 102px;
    height: 102px;
    margin-right: 20px;
  }
  .files {
    // display: flex;
    // flex-wrap: wrap;
    .file-content {
      width: 422px;
      height: 72px;
      background: #f8f8f8;
      display: flex;
      align-items: center;
      padding: 0 30px;
      margin: 0 20px 20px 0;
      cursor: pointer;
      img {
        width: 34px;
        height: 39px;
      }
      .file-name {
        margin: 0 20px;
        p {
          margin: 0;
        }
        span {
          font-size: 14px;
          color: #999999;
          line-height: 19px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
  .son-content {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
}
</style>